<template>
	<view class="content">
		<view class="row b-b">
			<text class="tit">收货人</text>
			<input class="input" type="text" v-model="addressData.name" placeholder="收货人姓名" placeholder-class="input-placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">手机号</text>
			<input class="input" type="number" v-model="addressData.mobile" placeholder="收货人手机号码" placeholder-class="input-placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">所在地区</text>
			<text @click="openPicker" class="input" :class="{ fontColor: isActive }">
				{{addressName}}
			</text>
		</view>
		<view class="row b-b">
			<text class="tit">详细地址</text>
			<input class="input" type="text" v-model="addressData.address" placeholder="街道、楼牌号等" placeholder-class="input-placeholder" />
		</view>

		<view class="row default-row">
			<text class="tit">设为默认</text>
			<switch color="#FF5E00" :checked="addressData.is_default" @change="switchChange" />
		</view>
		<view class="row default-row" v-if="manageType==='edit'" @click="delAdd">
			<text class="tit del">是否删除地址</text>
		</view>
		<button class="add-btn" @click="confirm">保存</button>
		<lotus-address v-on:choseVal="choseValue" :lotusAddressData="lotusAddressData"></lotus-address>
		<uni-popup ref="image" type="center" :custom="true">
			<view class="uni-image">
				<image class="image" :src="popImage" mode="" style="width: 80rpx;height: 80rpx;"/>
				<view class="font34 colorfont">
					{{showToastTips}}
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import lotusAddress from "@/components/Winglau14-lotusAddress/Winglau14-lotusAddress.vue";
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			lotusAddress,
			uniPopup
		},
		data() {
			return {
				addressData: {
					name: '',
					mobile: '',
					area: '',
					area_id: 0,
					city: '',
					city_id: 0,
					province: '',
					province_id: 0,
					address: '',
					is_default: 0,
				},
				addressName: '选择所在地区',
				addressId: '',
				lotusAddressData: {
					visible: false,
					provinceName: '',
					cityName: '',
					townName: '',
				},
				isActive: true,
				manageType: '',
				addressResult:{},
				showToastTips:'',
				popImage:''
			}
		},
		onLoad(option) {
			let title = '新增收货地址';
			if (option.type === 'edit') {
				title = '编辑收货地址'
				const optionData = JSON.parse(option.data)
				this.addressData = optionData
				this.addressName = optionData.province + " " + optionData.city + " " + optionData.area;
				this.addressId = optionData.id;
				this.isActive = false;

			}
			this.manageType = option.type;
			uni.setNavigationBarTitle({
				title
			})
		},
		methods: {
			//打开picker
			openPicker() {
				this.lotusAddressData.visible = true;
				this.isActive = false
			},
			//回传已选的省市区的值
			choseValue(res) {
				//res数据源包括已选省市区与省市区code
				this.lotusAddressData.visible = res.visible; //visible为显示与关闭组件标识true显示false隐藏
				//res.isChose = 1省市区已选 res.isChose = 0;未选
				if (res.isChose) {
					this.lotusAddressData.provinceName = res.province; //省
					this.lotusAddressData.cityName = res.city; //市
					this.lotusAddressData.townName = res.town; //区
					this.addressName = `${res.province} ${res.city} ${res.town}`; //region为已选的省市区的值
					this.addressData.province = res.province
					this.addressData.province_id = res.provinceCode
					this.addressData.city = res.city
					this.addressData.city_id = res.cityCode
					this.addressData.area = res.town
					this.addressData.area_id = res.townCode
				}
			},
			switchChange(e) {
				if (e.detail.value) {
					this.addressData.is_default = 1;
				} else {
					this.addressData.is_default = 0;
				}

			},
			// 删除地址
			delAdd() {
				const {
					$http,
					$requestApi,
					addressId,
					$api
				} = this;
				let that = this;
				uni.showModal({
					title: '温馨提示',
					content: '删除后将无法恢复，请谨慎操作。',
					confirmText: '删除',
					cancelColor: '#FF5E00',
					confirmColor: '#FF5E00',
					success: function(res) {
						if (res.confirm) {
							$http
								.request({
									method: 'POST', // 请求方法必须大写
									url: $requestApi.deleteAddress,
									data: {
										id: addressId
									},
								})
								.then(result => {
									let _data = result.data;
									if (_data.code === 200) {
										$api.msg('删除成功');
										$api.prePage().refreshList();
										setTimeout(() => {
											that.$Router.back(1)
										}, 800)
									}
								})
								.catch(err => {
									console.log(err);
								});
						}
					}
				})
			},
			//提交
			confirm() {
				
				let data = this.addressData;
				if (!data.name) {
					this.popImage = '/static/useCenter/error.png';
					this.$refs['image'].open();
					this.showToastTips='请填写收货人姓名'
					return;
				}
				if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(data.mobile)) {
					this.popImage = '/static/useCenter/error.png';
					this.$refs['image'].open();
					this.showToastTips='请输入正确的手机号码'
					return;
				}
				if (!data.province) {
					this.popImage = '/static/useCenter/error.png';
					this.$refs['image'].open();
					this.showToastTips='请选择所在地区'
					return;
				}
				if (!data.area) {
					this.popImage = '/static/useCenter/error.png';
					this.$refs['image'].open();
					this.showToastTips='请填写详细地址信息'
					return;
				}
				uni.showLoading({
				    title: '加载中'
				});
				var requestUrl = '';
				var requestPost = '';
				if (this.manageType == 'edit') {
					data['id'] = this.addressId;
					requestUrl = this.$requestApi.updateAddress;
					requestPost='POST'
				} else {
					requestUrl = this.$requestApi.createAddress;
					requestPost='POST'
				}
				this.$http
					.request({
						method: requestPost, // 请求方法必须大写
						url: requestUrl,
						data: data
					})
					.then(result => {
						let _data = result.data;
						if (_data.code === 200) {
							uni.hideLoading();
							//this.$api.prePage()获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义
							this.$api.prePage().refreshList();
							this.popImage = '/static/useCenter/login-success.png';
							this.$refs['image'].open();
							this.showToastTips=`地址${this.manageType=='edit' ? '修改': '添加'}成功`;
							setTimeout(() => {
								uni.navigateBack()
							}, 800)
						}else if(_data.code === 20008){
							this.$api.msg('新增地址最多20条');
							return;
						}
					})
					.catch(err => {
						console.log(err);
					});

			},

		},

	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}

	.fontColor {
		color: #D1D1D6 !important;
	}
	.input-placeholder{
		color: #D1D1D6;
	}

	.row {
		display: flex;
		align-items: center;
		position: relative;
		padding:36upx;
		background: #fff;

		.tit {
			flex-shrink: 0;
			width: 150upx;
			font-size: 30upx;
			color: #0B0E11;
		}

		.del {
			color: $font-color-f00;
		}

		.input {
			flex: 1;
			font-size: 30upx;
			color: #0B0E11;
		}

		.icon-shouhuodizhi {
			font-size: 36upx;
			color: $font-color-light;
		}
	}

	.default-row {
		margin-top: 16upx;

		.tit {
			flex: 1;
		}

		switch {
			transform: translateX(16upx) scale(.9);
		}
	}

	.add-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		font-size: $font-lg36;
		color: #fff;
		background-color: $base-color2;
		border-radius: 40upx;
		box-shadow: 0px 10px 30px rgba(255, 68, 0, 0.2);
		position: fixed;
		bottom: 20upx;
		left: 30upx;
	}
</style>
